<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/statics/layui/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<div>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container demoTable">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" data-type="getCheckData" lay-event="batchRemove">删除
        </button>
    </div>
</script>

<script type="text/html" id="dataScope">
    {{d.dataScope=='1' ? '全部数据权限' :
      d.dataScope=='2' ? '自定数据权限' :
      d.dataScope=='3' ? '本部门数据权限' :
      d.dataScope=='4' ? '本部门及以下数据权限' : ''}}
</script>

<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.roleId}}" lay-skin="switch" lay-text="正常|停用" lay-filter="status" {{
           d.status==0 ? 'checked' : '' }} />
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="view-t">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="${pageContext.request.contextPath}/statics/layui/layui/layui.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'layer','element'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var element = layui.element;

        var tableIns = table.render({
            elem: '#test'
            , url: '${pageContext.request.contextPath}/role/list'
            , cols: [[
                {type: 'checkbox', title: '选择', width: 60, style: "", sort: false, align: 'center'}
                , {field: 'roleId', width: 100, title: '编号', sort: false, align: 'center'}
                , {field: 'roleName', width: 120, title: '角色名称', align: 'center'}
                , {field: 'roleKey', width: 120, title: '角色权限字符串', align: 'center', sort: false}
                , {field: 'dataScope', title: '数据范围', width: 150,templet: '#dataScope', align: 'center'}
                , {field: 'status', width: 150, title: '角色状态', align: 'center', templet: '#status', sort: false}
                , {field: 'delFlag', width: 150, title: '删除标志', align: 'center', sort: false}
                , {field: '', width: 180, title: '操作', align: 'center', templet: '#barDemo', sort: false}
            ]]
            , page: true
        });

    })
</script>
</body>
</html>
